<template>
  <div class="home">
    <h3>对轮播图组件进行测试</h3>
    <!--
         - list:是图片列表数据，它是一个数组，保存要轮播图片信息
         - auto:2000. 开启自动播放。2000毫秒切换一张.
         - curIdx:初始播放第几张
    -->
    <my-slider
      style="width:936px;height:550px;"
      :auto='2000'
      :curIdx="curIdx"
      :list="list"
      @click="hClick"
      @slider="hSlider"
      >
    </my-slider>

  </div>
</template>

<script>

export default {
  name: 'SliderTest',
  data () {
    return {
      curIdx: 2, // 默认显示第二张图
      list: [ // 需要轮播的图片数据
        {
          url: require('./img/12.jpg'),
          alt: '大署'
        },
        {
          url: 'http://pic3.pocoimg.cn/image/poco/works/08/2020/0817/08/15976233699153763_201444271.JPG',
          alt: '瀑布之下'
        },
        {
          url: 'http://pic3.pocoimg.cn/image/poco/works/78/2020/0816/08/15975388132359908_201444271.JPG',
          alt: '18岁的爱情'
        },
        {
          url: 'http://pic3.pocoimg.cn/image/poco/works/44/2020/0806/08/15966728626974635_201444271.JPG',
          alt: '一个人的路'
        },
        {
          url: '//pic3-nc.pocoimg.cn/image/poco/works/80/2020/0723/10/15954717699206115_201421362_H800.jpg',
          alt: '细水流年'
        }
      ]
    }
  },
  methods: {
    hClick (index) {
      // alert(index)
      console.log('当前时', index, '被点击')
    },
    hSlider (idex) {
      console.log(idex)
    }
  }
}
</script>
